<template>
  <div class="orders-container">
    <el-card class="orders-card">
      <template #header>
        <div class="card-header">
          <span>订单管理</span>
          <el-select
            v-model="searchForm.status"
            placeholder="订单状态"
            clearable
          >
            <el-option label="未知状态" value="未知状态" />
          </el-select>
        </div>
      </template>

      <!-- 订单列表 -->
      <el-table :data="orderList" stripe v-loading="loading">
        <el-table-column
          label="订单编号"
          prop="id"
          width="120"
          align="center"
        />
        <el-table-column label="商品名称" min-width="200">
          <template #default="scope">
            {{ scope.row.shoppingCartRespList[0].productName }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="100" align="center">
          <template #default="scope">
            {{ calculateTotalQuantity(scope.row.shoppingCartRespList) }}
          </template>
        </el-table-column>
        <el-table-column label="金额" width="120" align="center">
          <template #default="scope">
            ¥ {{ calculateTotal(scope.row.shoppingCartRespList).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template #default>
            <el-tag type="info">未知状态</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="180" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.shoppingCartRespList[0].createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template #default>
            <el-button link type="primary">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
        <div class="total-info">Total {{ total }}</div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import request from "@/utils/request";

interface ShoppingCartItem {
  id: number;
  userId: number;
  productId: number;
  quantity: number;
  createdBy: string;
  createdTime: number;
  isDeleted: number;
  productName: string;
  productPrice: number;
  productAvatar: string;
}

interface Order {
  id: number;
  shoppingCartRespList: ShoppingCartItem[];
}

const loading = ref(false);
const orderList = ref<Order[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const searchForm = ref({
  status: "",
});

// 计算订单总金额
const calculateTotal = (items: ShoppingCartItem[]) => {
  return items.reduce(
    (sum, item) => sum + item.productPrice * item.quantity,
    0
  );
};

// 计算商品总数量
const calculateTotalQuantity = (items: ShoppingCartItem[]) => {
  return items.reduce((sum, item) => sum + item.quantity, 0);
};

// 格式化日期
const formatDate = (timestamp: number) => {
  const date = new Date(timestamp);
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
};

// 获取订单列表
const getOrders = async () => {
  loading.value = true;
  try {
    const res = await request({
      url: "/productOrder/order/list",
      method: "get",
    });
    if (res.success) {
      orderList.value = res.data;
      total.value = res.data.length;
    }
  } catch (error) {
    console.error("获取订单列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 页码改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getOrders();
};

onMounted(() => {
  getOrders();
});
</script>

<style lang="scss" scoped>
.orders-container {
  padding: 20px;

  .orders-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;

      span {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        position: relative;
        padding-left: 12px;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: #1890ff;
          border-radius: 2px;
        }
      }

      .el-select {
        width: 160px;
      }
    }

    :deep(.el-table) {
      border-radius: 8px;
      overflow: hidden;
      margin: 16px 0;

      th {
        background-color: #fafafa;
        color: #333;
        font-weight: 600;
        height: 48px;
        padding: 8px 16px;
      }

      td {
        padding: 12px 16px;
      }

      .el-tag {
        border-radius: 4px;
        padding: 0 12px;
        height: 28px;
        line-height: 26px;
        font-size: 13px;

        &.el-tag--success {
          background: #f6ffed;
          border-color: #b7eb8f;
          color: #52c41a;
        }

        &.el-tag--warning {
          background: #fffbe6;
          border-color: #ffe58f;
          color: #faad14;
        }

        &.el-tag--info {
          background: #f4f4f5;
          border-color: #e9e9eb;
          color: #909399;
        }
      }

      .el-button--text {
        padding: 0;
        height: auto;
        font-size: 14px;

        &:hover {
          color: #40a9ff;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-top: 1px solid #f0f0f0;

      :deep(.el-pagination) {
        .el-pagination__total {
          margin-right: 16px;
        }

        .el-pagination__sizes {
          margin-right: 16px;
        }

        .el-pager li {
          border-radius: 4px;

          &.is-active {
            background-color: #1890ff;
          }
        }

        .btn-prev,
        .btn-next {
          border-radius: 4px;
        }
      }

      .total-info {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .loading-mask {
    background-color: rgba(255, 255, 255, 0.9);

    .el-loading-spinner {
      .el-loading-text {
        color: #1890ff;
        font-size: 14px;
        margin-top: 8px;
      }

      .circular {
        .path {
          stroke: #1890ff;
        }
      }
    }
  }
}
</style> 